<template>
  <HeadContainer class="mine-purchases bg-background" :title="$t('title.buyList')" @back="back">
    <div :class="{ load }">
      <div v-show="load" class="title"></div>
      <div v-show="load" class="card"></div>
      <div v-show="!load" class="gap-col-16">
        <div class="d-flex justify-space-between">
          <div class="font-size-14 font-weight-500">{{ $t('info.creditCard.info') }}</div>
          <div
            v-if="creditCardList.length > 0"
            class="text-primary font-size-14 font-weight-500 pointer"
            @click="emits('toPage', `credit-card`)"
          >
            {{ $t('info.creditCardManage') }}
          </div>
        </div>
        <div
          v-if="creditCardList.length > 0"
          class="list font-size-14 font-weight-500 d-flex justify-space-between align-center card"
          :class="{ 'ban-card': defaultCard.is_ban }"
        >
          <div class="gap-col-8" :class="{ 'text-subtitle-x': defaultCard.is_ban }">
            <div>{{ toCapitalize(defaultCard.card.display_brand) }}</div>
            <div>**** **** **** {{ defaultCard.card.last4 }}</div>
          </div>
          <div v-if="defaultCard.is_ban" class="text-primary">{{ $t('info.creditCard.disabled') }}</div>
          <div v-else>{{ $t('info.default') }}</div>
        </div>
        <div v-else class="list d-flex justify-space-between align-center pointer card" @click="openAddCreditCard">
          <div class="font-size-14 font-weight-500">{{ $t('info.creditCard.add') }}</div>
          <Icon name="add"></Icon>
        </div>
      </div>
    </div>

    <!-- tab 按鈕區 -->
    <MediaTabs v-model="modelValue" :tabs="tabs"></MediaTabs>
    <!-- tab 內容區 -->
    <div v-for="(tab, index) in tabs" :key="index">
      <div v-show="modelValue == tab.value">
        <component :is="tab.component" @to-page="(name, params) => $emit('to-page', name, params)"></component>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { onMounted, ref, shallowRef, watch } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useCreditCardStore } from '@/store/credit-card'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { toCapitalize } from '@/utils/string-helper'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import Subscript from '@/components/mine/Subscript.vue'
import Transact from '@/components/mine/Transact.vue'
import MediaTabs from '@/components/tabs/MediaTabs.vue'
import { POPUP_DIALOG_TYPE } from '@/constant'

const creditCardStore = useCreditCardStore()
const { getCreditCardList } = creditCardStore
const { creditCardList, defaultCard } = storeToRefs(creditCardStore)
const emits = defineEmits(['toPage', 'back'])
const { $popupDialog } = usePopupDialogStore()
const load = ref(true)
const router = useRouter()

onMounted(getCreditCardList)

const modelValue = ref('order')
const tabs = ref([
  { value: 'order', label: $t('label.order'), component: shallowRef(Transact) },
  { value: 'sub', label: $t('label.subscribe'), component: shallowRef(Subscript) },
])

const openAddCreditCard = () => {
  $popupDialog(POPUP_DIALOG_TYPE.CREDIT_CARD, {
    title: $t('info.creditCard.add'),
    confirm: () => {},
    cancel: () => {},
  }).open()
}

watch(creditCardList, (val) => {
  if (val || val.length === 0) {
    load.value = false
  }
})

function back() {
  emits('back')
  router.replace({ name: 'mine' })
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/loading-skeleton.scss';

.load {
  width: 100%;

  .title {
    height: 2rem;
    border-radius: 0.625rem;
    margin-bottom: 0.5rem;

    @include loading-skeleton;
  }
  .card {
    height: 3.5rem;
    border-radius: 0.625rem;
    margin-bottom: 0.5rem;
    @include loading-skeleton;
  }
}
.list {
  border-radius: 0.625rem;
  padding: 0.625rem 1rem;
  background: rgb(var(--v-theme-surface));
  margin-bottom: 1rem;
}

.ban-card {
  background-color: rgba(var(--v-theme-surface), 0.5) !important;
}
</style>
